<template>
  <div class='menus'>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 添加按钮 -->
    <el-button type="primary" class="add-btn" @click="handleAdd"> 添加 </el-button>

    <!-- 菜单表格 -->
    <el-table
        :data="menus"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="title"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="icon"
          label="图标"
          width="180">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
            <template slot-scope="scope">
                <el-tag :type="scope.row.type=== 1 ? '' : 'success'"> {{ scope.row.type === 1 ? "目录" : "菜单" }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
          prop="url"
          label="菜单URL">
          <template slot-scope="scope">
             <el-link type="primary">{{scope.row.url}}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>

        </el-table-column>
    </el-table>


    <!-- 添加菜单 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="menuForm" :rules="ruleForm">
        <!-- 上级菜单 -->
        <el-form-item label="上级菜单" :label-width="formLabelWidth">
          <el-select v-model="form.pid" placeholder="请选择上级菜单" @change="menuChange">
            <el-option label="顶级菜单" :value="0"></el-option>
            <el-option :label="m.title" :value="m.id" v-for="m in menuArr" :key="m.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- 菜单名称 -->
        <el-form-item label="菜单名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 目录图标: 当选择顶级菜单时，显示目录图标 v-if="form.pid == 0" -->
        <el-form-item label="目录图标" :label-width="formLabelWidth" v-if="form.pid == 0">
          <el-input v-model="form.icon" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 菜单地址：当选择不是顶级菜单时，显示菜单地址 v-else -->
        <el-form-item label="菜单地址" :label-width="formLabelWidth" v-else>
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 类型 -->
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="1" :disabled="form.type !=1">目录 </el-radio>
            <el-radio :label="2" :disabled="form.type !=2">菜单 </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 菜单状态 -->
        <el-form-item label="状态" prop="status">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  
  </div>
</template>

<script>

/* 
pid上级分类编号title标题icon图标type类型1目录2菜单url菜单地址status
*/
import axios from 'axios'
export default {
  name: 'menus',
  data(){
    return {
      dialogFormVisible:false,
      formLabelWidth:"180",
      form:{
         pid:"",
         title:"",
         icon:"",
         type:1,
         url:"",
         status:true
      },
      ruleForm:{
        status:[
          {required:true}
        ]
      },
      // 所有菜单数据
      menus:[],
      // 添加菜单的表单的选择列表的数据
      menuArr:[],
      title:"添加菜单",
      id:null
    }
  },
  created() {
     //获得所有菜单数据
      this.getAllMenus();

       //请求接口，获得顶级菜单的数据
      this.getMenus()
  },
  methods:{
    handleEdit(id){
      this.id = id;
      // console.log(id)
      // 显示出编辑的对话框
      this.dialogFormVisible = true;
      this.title = "编辑菜单"
      this.getMenuInfo(id)
    },
    // 获得表单的详情数据
    getMenuInfo(id){
      axios.get(`http://localhost:3000/api/menuinfo?id=${id}`)
      .then(res =>{
          if(res.data.code === 200){
            this.form = res.data.list;
            this.form.status = this.form.status === 1 ? true : false;
          }
      })
      .catch(err =>{
        console.log(err)
      })
    },
    handleDelete(id){
        // 删除菜单
        axios.post("http://localhost:3000/api/menudelete",{
          id:id
        })
        .then(res =>{
          if(res.data.code === 200){
            this.getAllMenus()
          }
        })
        .catch(err =>{
          console.log(err)
        })
    },
    // 点击添加按钮
    handleAdd(){
      // 显示添加对话框
       this.dialogFormVisible = true;
      //  请求接口，获得顶级菜单的数据
      this.getMenus()
    },
    getMenus(){
      axios.get("http://localhost:3000/api/menulist?pid=0")
      .then(res =>{
        this.menuArr = res.data.list
      })
      .catch(err =>{
        console.log(err)
      })
    },
    menuChange(e){
      console.log(e)
      if(e == 0){
        // pid == 0,那么就是目录，则type = 1；
        this.form.type = 1;
      }else{
        // 如果pid不是0，不是目录，则type =2
        this.form.type = 2;
      }
    },
    // 提交表单
    submitForm(){
      // console.log(this.form)
      // 表单验证
      this.$refs["menuForm"].validate( valid =>{

          if(valid){
              // 把表单数据发送到后端
              this.form.status = this.form.status ? 1: 2;

              // 根据title判断，当前是添加还是编辑
              let url = "http://localhost:3000/api/menuadd"
              if(this.title === "编辑菜单"){
                url = "http://localhost:3000/api/menuedit"
                this.form.id = this.id;
              }
             
              axios.post(url,this.form)
              .then(res =>{
                if(res.data.code === 200){
                  this.dialogFormVisible = false;
                  this.getAllMenus();
                }else{
                   this.$message(res.data.msg);
                }
              })
              .catch(err=>{
                console.log(err)
              })

              // 表单清空
              this.form = {
                pid:"",
                title:"",
                icon:"",
                type:1,
                url:"",
                status:true
              }
          }else{
            console.log("表单验证失败")
          }
      })
    },
    // 获得所有菜单的数据
    getAllMenus(){
      axios.get("http://localhost:3000/api/menulist?istree=1")
      .then(res =>{
        if(res.data.code === 200){
            this.menus = res.data.list;
        }
      })
      .catch(err=>{
        console.log(err)
      })
    }
  }
}
</script>
<style scoped>
.add-btn{
  margin-top:20px;
  margin-bottom:20px;
}
</style>
